---
title: 'Wasp Auth UI: The first full-stack auth with self-updating forms!'
authors: [matijasos]
image: /img/auth-ui/auth-customize-code.png
tags: [webdev, wasp, startups, github]
---

import { DiscordLink } from './components/DiscordLink';
import { ImgWithCaption } from './components/ImgWithCaption';

One of the main benefits of Wasp is having deep understanding of your entire full-stack app - e.g. what routes you have, what data models you defined, but also what methods you use for authentication. And that enables us to do some pretty cool stuff for you!

<ImgWithCaption caption="Customize auth forms to fit your brand!" alt="Auth UI Demo" source="img/auth-ui/auth-ui-demo.png" />

Once you've listed auth methods you want to use in your `.wasp` config file, you're done - from that Wasp generates a full authentication form that you simply import as a React component. **And the best part is that is updates dynamically as you add/remove auth providers!**

You can [see the docs and give it a try here](/docs/auth/ui).

{/* truncate */}

## Auto-updating magic 🔮

<ImgWithCaption caption="Add GitHub as another auth provider -> the form updates automatically!" alt="Auth UI Demo gif" source="img/auth-ui/auth-demo-compiler.gif" />

:::tip

Since `.wasp` config file contains a high-level description of your app's requirements, Wasp can deduce **a lot** of stuff for you from it, and this is just a single example.

:::

When you update your `.wasp` file by adding/removing an auth method (GitHub in this case), Wasp will detect it and automatically regenerate the auth form. No need to configure anything else, or change your React code - just a single line change in `.wasp` file and everything else will get taken care of!

<ImgWithCaption caption="When you realize Wasp is a compiler and actually understands your app 🤯" alt="Mind exploding" source="img/auth-ui/mind-explosion.gif" />

## Customize it! 🎨

Although it looks nice, all of this wouldn't be really useful if you couldn't customize it to fit your brand. That's easily done through the component's props:

<ImgWithCaption caption="Easily customize your auth form through props!" alt="Customizing auth form through props" source="img/auth-ui/auth-customize-code.png" />

And that's it! You can see the whole list of tokens you can customize [here](https://github.com/wasp-lang/wasp/blob/main/waspc/data/Generator/templates/react-app/src/stitches.config.js). More are coming in the future!

Wasp out 🐝 🎤- [give it a try](/docs/auth/ui) and let us know how you liked it in our <DiscordLink />!
